<template>
  <div class="seat-index">
    <div class="toolbar">
      <el-button @click="refresh" icon="el-icon-refresh"></el-button>
      <el-button type="primary" @click="add">添加</el-button>
    </div>

    <el-table border v-loading="loading" :data="data">
      <el-table-column label="座位名称" prop="name"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="{row}">
          <el-tag type="success" v-if="row.status === 1">开启</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="160">
        <template slot-scope="{row}">
          <el-button size="small" @click="edit(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :hide-on-single-page="true"
      :total="pageTotal"
      :pageSize="pageSize"
      layout="prev, pager, next, jumper, ->, total"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
import table from '../../../mixins/table'
export default {
  name: 'SeatIndex',
  mixins: [table],
  data () {
    return {
      url: '/admin/seat',
      delUrl: '/admin/seat'
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    add () {
      this.$router.push('/Admin/Seat/Add')
    },
    edit (row) {
      this.$router.push({ path: '/Admin/Seat/Edit', query: { row } })
    }
  }
}
</script>
